<template>  
    <div>
        <my-item :data=article v-for="(article,index) in articles"></my-item>
        <my-loadmore ref='load'></my-loadmore>
    </div>
</template>
<script>
    import myItem from './Item'
    import myLoadmore from './Loadmore'
    export default {
        data() {
            return {
                articles: [],
                offset: 0
            }
        },
        methods: {
            fetchArticles() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:5000/api/article/showbystep',
                    data: {
                        offset: _this.offset
                    },
                    crossDomain: true,
                    async: true,
                    dataType: 'json',
                    success: function(res) {
                        _this.articles = _this.articles.concat(res.Table2)
                        _this.offset += 5
                        _this.$refs.load.show = false
                        if (res.Table1[0].status == 0) {
                            _this.$refs.load.show_text = false
                        }
                    },
                    error: function(res) {
                        console.log(res)
                    }
                })
            }
        },
        components: {
            myItem,
            myLoadmore
        },
        created: function() {
            
            this.fetchArticles()
        },
        watch: {
            // '$route': 'fetchArticles'
        }
    }
</script>
<style>

</style>